<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

import { toSubmitMessageAPI } from '@/http/api/message';

let name = ref('');
let sex = ref('');
let address = ref('');
let phone = ref('');
let email = ref('');
let idNumber = ref('');
let age = ref();

let __name = ref('');
let __age = ref();
let __sex = ref('');
let __address = ref('');
let __phone = ref('');
let __email = ref('');
let __idNumber = ref('');


function myReplace(str: string, left: number, right: number, target: string) {
    let len = str.length;
    if (len == 1) return str;
    if (len == 2) return str.substring(0, 1) + '*';
    if (left >= len || right <= left) {
        left = 1;
        right = len - 1;
    }
    let resStr = str.substring(0, left);
    for (let i = left; i < right; i++) {
        resStr += target;
    }
    return resStr + str.substring(right);
}

watch(name, (value) => {
    __name.value = myReplace(value, 1, value.length - 1, '*');
});
watch(age, (value) => {
    __age.value = Math.round(1 + Math.random() * 119);
});
watch(sex, (value) => {
    __sex.value = '*';
});
watch(address, (value) => {
    __address.value = myReplace(value, 3, value.length - 4, '*');
});
watch(phone, (value) => {
    __phone.value = myReplace(value, 3, value.length - 4, '*');
});
watch(email, (value) => {
    __email.value = myReplace(value, 3, value.length - 3, '*');
});
watch(idNumber, (value) => {
    __idNumber.value = myReplace(value, 3, value.length - 1, '*');
});

function toSubmit() {
    if ((name.value.trim() == '')) {
        ElMessage({
            message: "请检查录入姓名！",
            type: "warning",
        });
        return;
    }

    if (!age.value || age.value.trim() == ''
        || !/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(age.value)) {
        ElMessage({
            message: "请检查录入正确年龄！",
            type: "warning",
        });
        return;
    }

    if (!sex.value || sex.value.trim() == '') {
        ElMessage({
            message: "请检查录入性别！",
            type: "warning",
        });
        return;
    }

    if (!email.value || email.value.trim() == ''
        || !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email.value)) {
        ElMessage({
            message: "请检查录入正确邮箱！",
            type: "warning",
        });
        return;
    }

    if (!phone.value || phone.value.trim() == ''
        || !/^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/.test(phone.value)) {
        ElMessage({
            message: "请检查录入正确电话号码！",
            type: "warning",
        });
        return;
    }

    if (!idNumber.value || idNumber.value.trim() == ''
        || !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(idNumber.value)) {
        ElMessage({
            message: "请检查录入正确身份证号码！",
            type: "warning",
        });
        return;
    }

    ElMessageBox.confirm(
        '请再次确认您输入的信息正确！',
        '温馨提示：',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            toSubmitMessageAPI({
                message: {
                    name: name.value,
                    age: age.value,
                    sex: sex.value,
                    address: address.value,
                    phone: phone.value,
                    email: email.value,
                    idNumber: idNumber.value
                },
                __message: {
                    name: __name.value,
                    age: __age.value,
                    sex: __sex.value,
                    address: __address.value,
                    phone: __phone.value,
                    email: __email.value,
                    idNumber: __idNumber.value
                }
            }).then((res) => {
                ElMessage({
                    type: 'success',
                    message: '提交成功！',
                })
            }).catch((err) => {
                console.log('------------', err);
                ElMessage({
                    type: 'error',
                    message: '提交失败！网络错误！',
                })
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已为您终止提交！',
            })
        })
}

</script>

<template>
    <div class=" overflow-auto w-full h-full p-4 flex flex-wrap">
        <div class=" basis-[16rem] grow-[1] w-[45%] h-full p-4 rounded-md bg-slate-200">
            <span class=" title">个人信息</span>
            <div class=" flex flex-wrap justify-center h-[calc(100%-2rem)]  m-auto w-[90%]">
                <div class="input-box"><span>姓名：</span><input v-model="name" type="text" name="" id=""></div>
                <div class="input-box">
                    <span>年龄：</span>
                    <input v-model="age" type="text" name="" id="age-message"
                        pattern="^(?:[1-9][0-9]?|1[01][0-9]|120)$">
                </div>
                <div class="input-box"><span>性别：</span>
                    <span>
                        <input type="radio" id="dewey" v-model="sex" value="男" name="drone">
                        <label for="dewey">男</label>
                    </span>
                    <span>
                        <input type="radio" id="dewey" v-model="sex" value="女" name="drone">
                        <label for="dewey">女</label>
                    </span>
                    <span>
                        <input type="radio" id="dewey" v-model="sex" value="其他" name="drone">
                        <label for="dewey">其他</label>
                    </span>
                </div>
                <div class="input-box">
                    <span>邮箱：</span>
                    <input v-model="email" type="email" name="" id="email-message">
                </div>
                <div class="input-box"><span>住址：</span><input v-model="address" type="text" name="" id=""></div>
                <div class="input-box">
                    <span>电话号码：</span>
                    <input v-model="phone" type="text" id="phone-message" name=""
                        pattern="^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$">
                </div>
                <div class="input-box">
                    <span>身份证号：</span>
                    <input v-model="idNumber" type="text" name="" id="idNumber-message"
                        pattern="(^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$)">
                </div>
                <div @click="toSubmit" class=" submit">
                    脱敏提交
                </div>
            </div>
        </div>
        <div class=" w-full md:w-[10%] md:h-full  flex justify-center items-center">
            <svg t="1711046446948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="9211" width="64" height="64">
                <path
                    d="M427.690667 170.666667h256.64L1024 512l-339.669333 341.333333h-256.64l339.669333-341.333333-339.669333-341.333333zM0 853.333333h256.64l339.669333-341.333333-339.669333-341.333333H0l339.669333 341.333333L0 853.333333z"
                    p-id="9212" fill="#13227a"></path>
            </svg>
        </div>

        <div class=" basis-[20rem] grow-[1] w-[45%] h-full p-4 rounded-md bg-slate-200">
            <span class=" title select-none text-[#777]">向外展示信息（取消可复制项）</span>
            <div class=" flex flex-wrap justify-center h-[calc(100%-2.4rem)] m-auto w-[80%]">
                <div class=" show-box">
                    <span class=" lable">姓名：</span><span class=" message">{{ __name }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">年龄（虚假）：</span><span class=" message">{{ __age }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">性别：</span><span class=" message">{{ __sex }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">邮箱：</span><span class=" message">{{ __email }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">住址：</span><span class=" message">{{ __address }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">电话号码：</span><span class=" message">{{ __phone }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">身份证号码：</span><span class=" message">{{ __idNumber }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$ruler: 16px;
$color-bg: #ebecf0;
$color-shadow: #babecc;
$color-white: #fff;

.title {
    font-size: 1.3rem;
    font-weight: bold;
}

.input-box {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;

    span {
        display: inline-block;
        width: 7rem;
        color: #555;
    }
}


input[type="text"],
input[type="email"] {
    display: flex;
    height: 1.5rem;
    width: 40vw;
    max-width: 17rem;
    min-width: 10rem;
    border: 0;
    outline: 0;
    font-size: $ruler;
    border-radius: $ruler * 20;
    padding: $ruler;
    background-color: $color-bg;
    text-shadow: 1px 1px 0 $color-white;
    box-shadow: inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    color: #777;
    letter-spacing: .1rem;

    &:focus {
        box-shadow: inset 1px 1px 2px $color-shadow,
            inset -1px -1px 2px $color-white;
    }
}

input[type="radio"] {
    cursor: pointer;
}

.submit {
    user-select: none;
    width: 40%;
    margin: 0 auto;
    min-width: 10rem;
    margin-top: 2rem;
    height: 2.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dfe4ea;
    color: #706fd3;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;

    &:hover {
        background: #dbdee3;
    }

    &:active {
        scale: 0.95;
    }
}

.show-box {
    width: 100%;
    user-select: none;
    color: #999;

    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;

    .lable {
        display: inline-block;
        width: 7rem;
    }

    .message {
        margin-left: 1rem;
        letter-spacing: .1rem;
    }
}

.input-box:has(#age-message:invalid)::after {
    content: "请检查你的输入";
    position: absolute;
    top: 2rem;
    left: 10rem;
    font-size: .7rem;
    color: red;
    letter-spacing: .1rem;
    font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
}

.input-box:has(#phone-message:invalid)::after {
    content: "电话号码格式错误";
    position: absolute;
    top: 2rem;
    left: 10rem;
    font-size: .7rem;
    color: red;
    letter-spacing: .1rem;
    font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
}

.input-box:has(#idNumber-message:invalid)::after {
    content: "身份证号格式错误";
    position: absolute;
    top: 2rem;
    left: 10rem;
    font-size: .7rem;
    color: red;
    letter-spacing: .1rem;
    font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
}

.input-box:has(#email-message:invalid)::after {
    content: "邮箱格式错误";
    position: absolute;
    top: 2rem;
    left: 10rem;
    font-size: .7rem;
    color: red;
    letter-spacing: .1rem;
    font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
}
</style>